<template>
  <div class="map-view">
  <div style="width: 100%;height: 55%;position: absolute;">
    <div class="map_border">
  <div id="japan_map" :style="{ zoom: zoom }" class="map-view-data-view"></div>
</div>
  </div>
  
    <div class="map1"></div>
    <div class="map2"></div>
    <div class="map3"></div>
  </div>
</template>

<script>
import tunneljson from "./tunnel.json";
export default {
  name: "bmap-page",
  data() {
    return {
      zoom: 1,
    };
  },
  created() {
    const _this = this;
    _this.zoom = 1 / _this.pxzoom().zoom;
  },
  mounted() {
    const _this = this;
    window.addEventListener("resize", function () {
      _this.zoom = 1 / _this.pxzoom().zoom;
    });
    this.baiduMap();
  },
  methods: {
    baiduMap() {
      var map = new BMapGL.Map("japan_map", {
        poi: false,
        poiText: false,
      });
      map.setMapStyleV2({
        styleId: "e694d05793bb76bd3fbd7de3100662c4",
      });

      var point = new BMapGL.Point(111.434138, 37.036352);
      map.centerAndZoom(point, 11);
      map.enableScrollWheelZoom(true);

      // 添加图层
      var lineLayer = new BMapGL.LineLayer({
        enablePicked: true,
        autoSelect: true,
        pickWidth: 30,
        pickHeight: 30,
        opacity: 1,
        selectedColor: "bule", // 选中项颜色
        style: {
          sequence: true,
          marginLength: 1000,
          borderColor: "rgba(27, 142, 236, .6)",
          borderMask: true,
          borderWeight: 2,
          strokeWeight: 6,
          strokeLineJoin: "miter", //描边线连接处类型, 可选'miter', 'round', 'bevel'
          strokeLineCap: "square", // 描边线端头类型，可选'round', 'butt', 'square'，默认round
          // 填充纹理图片地址，默认是空。图片需要是竖向表达，在填充时会自动横向处理。
          strokeStyle: "dashed",

          strokeColor: [
            "case",
            ["boolean", ["feature-state", "picked"], false],
            "#6704ff",
            [
              "match",
              ["get", "name"],
              "1标",
              "#eeeeee",
              "2标",
              "#6704ff",
              "核桃岩隧道",
              "#64E5B8",
              "范火泉隧道",
              "#F9CC50",
              "火台山隧道",
              "#F88888",
              "交口隧道",
              "#64E999",
              "东山隧道",
              "#F9C999",
              "罗村隧道",
              "#F95999",
              "隧道",
              "#eee999",
              "#6704ff",
            ],
          ],
        },
      });

      lineLayer.addEventListener("click", function (e) {
        if (e.value.dataIndex !== -1 && e.value.dataItem) {
          alert(e.value.dataItem.properties.name);
        }
      });
      lineLayer.setData(tunneljson);
      map.addNormalLayer(lineLayer);

      this.hua1(map);
      this.hua2(map);
      this.hua3(map);
      this.hua4(map);
      this.hua5(map);
    },
    hua1(map) {
      //准备一个中心点（经度，维度）
      var point = new BMapGL.Point(111.681913, 37.156583);
      const label = new BMapGL.Label("LJ1", {
        position: point,
        offset: new BMapGL.Size(-55, -55),
      });
      map.addOverlay(label);
    },
    hua2(map) {
      //准备一个中心点（经度，维度）
      var point = new BMapGL.Point(111.497365, 37.093972);
      const label = new BMapGL.Label("LJ2", {
        position: point,
        offset: new BMapGL.Size(-55, -55),
      });
      map.addOverlay(label);
    },
    hua3(map) {
      //准备一个中心点（经度，维度）
      var point = new BMapGL.Point(111.338113, 37.006413);
      const label = new BMapGL.Label("LJ3", {
        position: point,
        offset: new BMapGL.Size(-55, -55),
      });
      map.addOverlay(label);
    },
    hua4(map) {
      //准备一个中心点（经度，维度）
      var point = new BMapGL.Point(111.234053, 36.953367);
      const label = new BMapGL.Label("LJ4", {
        position: point,
        offset: new BMapGL.Size(-55, -55),
      });
      map.addOverlay(label);
    },
    hua5(map) {
      //准备一个中心点（经度，维度）
      var point = new BMapGL.Point(111.077676, 36.954751);
      const label = new BMapGL.Label("LJ5", {
        position: point,
        offset: new BMapGL.Size(-55, -55),
      });
      map.addOverlay(label);
    },
  },
};
</script>

<style scoped>
.map-view {
  box-sizing: border-box;
  position: absolute;
  width: 55%;
  height: 100%;
  background: transparent;
  left: 22.5%;
  top: 100px;
  z-index: 0;
}

.map_border{
  background-image: url(kuang.png);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 4;
  /* padding: 20px; */
  background-size: 100% 100%;
}

.map-view-data-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 90%;
  height: 89%;
  /* z-index: 1; */
  margin:3% 5%; 
}

.map1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36rem;
  height: 36rem;
  border: 5px dashed rgba(30, 80, 185, 0.7);
  animation: rotate 10s linear infinite;
  border-radius: 50%;
  opacity: 0.3;
  z-index: 0;
}

.map2 {
  position: absolute;
  width: 45rem;
  height: 45rem;
  border: 3px dashed rgba(30, 80, 185, 0.5);
  border-radius: 50%;
  opacity: 0.6;
  animation: rotate 15s linear infinite;
  z-index: 1;
  background-size: 100% 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.map3 {
  width: 29rem;
  height: 29rem;
  border: 40px solid rgba(30, 80, 185, 0.6);
  border-radius: 50%;
  animation: rotate1 8s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
  color: #000;
  z-index: 2;
}

@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
</style>
